<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>时间修饰符</title>
</head>
<body>
  <!-- 1.stop:阻止事件冒泡 -->
  <div id="app1">
     <div @click='handleClick("你点到了div")' :style='isStyle'>
       <button @click.stop='handleClick("你点到了btn")'>点击我啊!</button>
     </div>
  </div>

  <!-- 2.prevent:阻止默认事件 -->
  <div id="app2">
     <a href="http://www.baidu.com" @click.prevent='handleClick("阻止默认事件")'>baidu</a>
  </div>

  <!-- 3.self:只有自身执行,会冒泡,但是不会被捕获执行 -->
  <div id="app3" style="width: 200px;height: 200px;background-color: pink;">
     <div style="width: 100%;" @click.self='handleClick("点击到了自身执行函数")'>111
        <div @click='handleClick("点击到了内部")' style="width: 50px;height: 50px;background-color: blue;">
            222
        </div>
     </div>
  </div>

  <!-- 4.capture:捕获冒泡 -->
  <!-- 执行顺序为最外层,最内层,第二层 -->
  <div id="app4" style="width: 300px;height: 300px;background-color: yellow;"
    @click.capture='handleClick("点击到了最外层div")'
  >
   我是最外层div
     <div style="background-color: pink;"
       @click='handleClick("点击到了第二层div")'
     >
       我是第二层div
       <div style="background-color: purple;"
         @click='handleClick("点击到了最内层div")'
       >
         我是第三层div
       </div>
     </div>
  </div>

  <!-- 5.once:点击只执行一次再点击不再执行 -->
  <div id="app5">
     <button @click.once='handleClick("点击只执行一次再点击不再执行")'>点击</button>
  </div>
  <!-- 6.passive:执行默的方法.浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时候,
  才能知道内部是否调用preventDefault函数来阻止默认事件,所以浏览器本身是不可以对这种情景进行优化的,
这种情况下用户的手势事件无法快速产生,会导致页面无法快速执行滑动逻辑,从而让用户觉得页面卡顿.
.passive尤其能提高移动端的性能.
注:prvent和passive冲突,不能绑定在同一事件上面.-->
</body>
<script src="./vue1111.js"></script>
<script>
  var App1 = new Vue({
    el:'#app1',
    data:{
      isStyle:{
        width:'200px',
        height:'200px',
        backgroundColor:'red'
      }
    },
    methods: {
      handleClick(msg){
       alert(msg);
       console.log(msg)
    }
    },
  });
  var App2 = new Vue({
    el:'#app2',
    data:"",
    methods:{
      handleClick(msg){
         alert(msg)
      }
    }
  });
  var App3 = new Vue({
    el:'#app3',
    data:'',
    methods:{
      handleClick(msg){
        console.log(msg)
      }
    }
  });
  var App4 = new Vue({
    el:'#app4',
    data:'',
    methods:{
      handleClick(msg){
        alert(msg)
      }
    }
  });
  var App5 = new Vue({
    el:'#app5',
    methods:{
      handleClick(msg){
        alert(msg)
      }
    }
  })
</script>
</html>